<template>
	<view class="skin-con">
		<view class="skin-index0 display-flex" v-if="type == 1" style="padding-left:40rpx;"> <!--质肤-->
			<img src="../../../static/skin-tag.png" class="skin-tag" alt="" />
			<view class="skin-type">{{obj.skinTypeName}}</view>
		</view>
		<view v-if="type == 2 || type == 3" class="skin-level" 
			:class="type == '2' ? 'brown' : type == '3' ? 'pink' : ''"> <!--黑头毛孔  色素沉着-->
			<view class="display-flex-between">
				<view class="title" :class="(type == '3' ? 't3':'t2')" :style="type == '3' ? 'margin-left:-6rpx':''">{{obj.texts[type].name}}</view>
				<view class="right display-flex-column">
					<view class="bar relative" :class="type == '2' ? 'brownbg' : type == 3 ? 'pinkbg' : ''">
						<img class="current-bar" :style="{left: ((obj.texts[type].rate) - 4)+'%'}"
							:src="type == 2 ? require('../../../static/brown.png') : type == 3 ?  require('../../../static/pink.png') :''" />
					</view>
					<view class="texts display-flex" :class="type=='2'?'w50':'w70'">
						<view :class="
								type == '2'
									? 'brownc'
									: type == 3
									? 'pinkc'
									: ''
							" class="text" v-for="(text, index) in obj.texts[type].list" :key="index">{{ text }}</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="dou-con display-flex-around" v-if="type == 2 || type == 3">  <!--黑头毛孔  色素沉着-->
		<!-- 	<view :style="{background: `url(${obj.avatar}) no-repeat center center /cover`}" class="doudou relative" style="overflow: hidden" >
			</view> -->

			<text style="display: none;">{{obj.points[type].length}} </text>
			<img :src="obj.resImageUrls[type]" alt="" style="width:92px;height:92px;border-radius: 50%;border: 10rpx solid #fff;"
				@click="preview(obj.resImageUrls[type])" />

			<!-- <img-url :ref="'ref' + type" :points="obj.points[type]" :avatar="obj.avatar"  v-if="obj.avatar && (type == 2 || type == 3)"></img-url> -->
			
			<view class="img-dou display-flex-column-center" :class="type == 3 && index == 1? 'img-dou2' :''" v-for="(dou, index) in obj.dous[type]" :key="index">
				<img :src="dou.url" alt="" class="dou" />
				<text :style="{color:dou.color}" v-if="dou.name.indexOf('毛孔')>-1">{{ dou.name }}</text>
				<!-- <text :style="{color:dou.color}" v-else>{{ dou.name }}:{{'&nbsp;'+ dou.count }}个</text> -->
				<text :style="{color:dou.color}" v-else>{{ dou.count=='0'?'无'+dou.name:dou.name+':'+'&nbsp;'+ dou.count+'个'}}</text>
			</view>
		 </view>
		
		
		<view class="pore-con display-flex display-flex-around" v-if="type == 4 " style="flex-direction: row;" :style="'height: 152rpx;'">
				<img :src="img" class="pore" alt="" style="margin-right: 80rpx;"/> <!--眼部-->
				 <view class="display-flex-between infos">
					<view class="text-info relative" v-for="(info, index) in obj[type]" :key="index">{{ info }}</view>
				 </view> 
		</view>
		
		
		<view class="wens display-flex-around" v-if="type == 5">  <!--衰老问题-->
			<view class="item-wen display-flex-column" v-for="(objItem, index) in obj[5]" :key="index">
				<img class="wen-img" :src="objItem.img" alt="" />
				<view class="name">{{ objItem.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ImgUrl from '../../test/index'
	export default {
		components: {
			ImgUrl
		},
		props: {
			obj: {
				type: Object,
				default: () => {
					return {};
				},
			},
			type: {
				type: String | Number,
				default: "1",
			},
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {
				units: '��',
				left: 20,
				img: this.type == 4 ?
					require("../../../static/eye@2x.png") :
					this.type == 3 ?
					require("../../../static/pore.png") :
					"",
			};
		},
		created() {
			
		},
		methods: {
			preview(imgUrl) {
				uni.previewImage({
					indicator: "none",
					urls: [imgUrl]
				});
			}
		},
		mounted() {},
	};
</script>

<style lang="scss" scoped>
	.skin-con {
		.skin-index0 {
			margin-bottom: 20rpx;
			color: #ff6875;
			height: 40px;
			background: #fff8fa;
			border-radius: 8px;

			.skin-tag {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.skin-type {
				color: inherit;
				font-size: 14px;
				// font-weight: bold;
			}
		}

		.skin-level {
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 40rpx 40rpx 40rpx 40rpx;
			width: 100%;
			height: 160rpx;
			border-radius: 16rpx;

			.title {
				position: relative;
    			top: -6rpx;
				width: 80rpx;
				font-weight: bold;
				line-height: 16px;
				font-size: 24rpx;
				align-self: flex-start;
				color: #7A746E;
				margin-left:-12rpx;
				text-align: center;
				height: 32rpx;
			}
			
			.t2{
				background: #f7f1ec;
				border-radius: 11px;
				
			}
			
			.t3{
				background: #ffe9eb;
				border-radius: 11px;
				color: #FF6A6A;
				
			}

			.right {
				width: 500rpx;

				.texts {
					overflow: hidden;
					width: 100%;
					position: relative;
					left: 20px;

					.text {
						margin-top: 16rpx;
						font-size: 24rpx;
						flex: 1;
						// &:first-child {
						// 	justify-content: flex-start;
						// }
						// // &:not(:last-child, :first-child) {
						// // 	justify-content: center;
						// // }
						// &:last-child {
						// 	justify-content: flex-end;
						// }
					}

					.brownc {
						color: #c5bcb2;
					}

					.pinkc {
						color: #c0a9af;
					}
				}

				.w50 {
					width: calc(100% + 50px);
				}

				.w70 {
					width: calc(100% + 70px);
				}

				.bar {
					border-radius: 20rpx;
					width: 500rpx;
					height: 20rpx;

					.current-bar {
						transition: all 1s;
						position: absolute;
						left: -14px;
						top: 0;
						margin: auto;
						bottom: 0;
						width: 56rpx;
						height: 56rpx;
					}
				}

				.brownbg {
					background-image: linear-gradient(to left,
							#aa8256,
							#d0b699,
							#fff8f1);
				}

				.pinkbg {
					background-image: linear-gradient(to left, #ff6590, #fff8f1);
				}
			}
		}

		.brown {
			// background-color: #fcf9f6;
			background-color: #FFFFFF;
			border: 6rpx solid #fcf9f6;
		}

		.pink {
			background-color: #fff8fa;
		}

		.dou-con {
			margin-bottom: 10px;
			width: 100%;
			line-height: 0;
			background: #FFF8FA;
			border-radius: 6px;
            height: 240rpx;
			.doudou {
				width: 200rpx;
				height: 200rpx;
			}
			.img-dou2{
				align-items: center;
				height: 100%;
				border-left: 10px solid white;
				position: relative;
				left: 10px;
				width: 226rpx;
			}
			.img-dou {
				// margin-right: 40upx;
				
				.dou {
					width: 108rpx;
					height: 108rpx;
				}

				font-weight: bold;
				color: #ff6a6a;
			}
		}

		.pore-con {
			margin-bottom: 10px;
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			
			min-height: 76px;
			background: #fff8fa;
			border-radius: 8px;

			.pore {
				width: 108rpx;
				height: 108rpx;
				
			}

			.infos {
				flex: 1;
				flex-wrap: wrap;

				.text-info {
					color: #ff6a6a;
					font-size: 28rpx;
					min-width: 200upx;
                    font-weight: bold;
					&::before {
						width: 3px;
						height: 3px;
						background: linear-gradient(90deg,
								#ff6590 0%,
								#ff6a6a 100%);
						position: absolute;
						content: "";
						top: 0;
						bottom: 0;
						margin: auto;
						left: -8px;
					}
				}
			}
		}

		.wens {
			margin-bottom: 10px;
			padding:20rpx 0;
			width: 100%;
			height: auto;
			background: #FFF8FA;
			border-radius: 6px;

			.item-wen {
				flex: 1;

				.wen-img {
					width: 108rpx;
					height: 108rpx;
					margin-bottom: 3px;
				}

				.name {
					color: #ff6a6a;
					font-size: 28rpx;
					text-align: center;
					font-weight: bold;
				}
			}
		}
	}
</style>
